<script setup>
// 组件引入
import ElFormCpn from './elFormCpn.vue'
// 功能函数引入
import { defineProps, watch, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/commonStore'
import { useDMStore } from '@/store/super-manger/dormitoryMangerStore'
import { showElMessage } from '@/utils/showTipMessage'


const dmStore = useDMStore();
const { isShowDMEditPanel } = storeToRefs(useCommonStore());

const props = defineProps({
    id: {
        type: Number,
        default: -1
    }
})

watch(isShowDMEditPanel, (newValue) => {
    if (newValue) {
        // 发送网络请求数据信息
        dmStore.getDmInfo(props.id);
    }
})

const elFormRef = ref(null);
// 清空内容
const clearContent = () => {
    elFormRef.value.clearForm();    // 调用子组件的方法
}

// 提交表单
const submitBtn = () => {
    elFormRef.value.submitForm()
}

// 信息修改成功
const updateInfo = () => {
    isShowDMEditPanel.value = false;
    showElMessage('信息修改成功！');
}
</script>

<template>
  <div class="edit_panel">
    <el-dialog 
        v-model="isShowDMEditPanel" 
        align-center
        width="60%"
        :close-on-click-modal="false"
    >
        <template #header>
            <span class="title">编辑</span>
        </template>

        <!-- 表单 -->
        <el-form-cpn ref="elFormRef" @submit-form="updateInfo"/>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="clearContent">清空</el-button>
                <el-button type="primary" plain @click="submitBtn">提交</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.title {
    font-size: 20px;
    text-align: center;
}
</style>